import React, { useState } from 'react';
import { Button, message } from 'antd';
import { DynamicForm } from '@/components/common/DynamicForm';
import type { FormConfig } from '@/types/dynamic-form';

const DynamicFormTest: React.FC = () => {
  const [formVisible, setFormVisible] = useState(false);

  const testFormConfig: FormConfig = {
    key: 'test-form',
    title: '测试表单',
    description: '这是一个测试用的动态表单',
    layout: 'vertical',
    requiredMark: true,
    initialValues: {
      name: '默认名称',
      status: true,
      type: 'A',
    },
    sections: [
      {
        key: 'basic',
        title: '基本信息',
        fields: [
          {
            key: 'name',
            label: '姓名',
            type: 'input',
            placeholder: '请输入姓名',
            required: true,
            rules: [
              { required: true, message: '请输入姓名' },
              { min: 2, max: 20, message: '姓名长度在2-20个字符之间' },
            ],
          },
          {
            key: 'age',
            label: '年龄',
            type: 'number',
            placeholder: '请输入年龄',
            min: 1,
            max: 120,
          },
          {
            key: 'email',
            label: '邮箱',
            type: 'input',
            placeholder: '请输入邮箱',
            rules: [
              { type: 'email', message: '请输入有效的邮箱地址' },
            ],
          },
        ],
        col: 2,
        gutter: 16,
      },
      {
        key: 'preferences',
        title: '偏好设置',
        fields: [
          {
            key: 'type',
            label: '类型',
            type: 'select',
            placeholder: '请选择类型',
            required: true,
            options: [
              { label: '类型A', value: 'A' },
              { label: '类型B', value: 'B' },
              { label: '类型C', value: 'C' },
            ],
          },
          {
            key: 'status',
            label: '状态',
            type: 'switch',
            defaultValue: true,
            fieldProps: {
              checkedChildren: '启用',
              unCheckedChildren: '禁用',
            },
          },
          {
            key: 'description',
            label: '描述',
            type: 'textarea',
            placeholder: '请输入描述信息',
            colSpan: 2,
          },
        ],
        col: 2,
        gutter: 16,
      },
    ],
  };

  const handleSubmit = async () => {
    message.success('表单提交成功！');
    setFormVisible(false);
  };

  return (
    <div style={{ padding: 24 }}>
      <Button type="primary" onClick={() => setFormVisible(true)}>
        测试动态表单
      </Button>

      <DynamicForm
        config={testFormConfig}
        visible={formVisible}
        onSubmit={handleSubmit}
        onCancel={() => setFormVisible(false)}
        width={800}
      />
    </div>
  );
};

export default DynamicFormTest;